<template>
  <div class="add-user-modal">
    <a-modal
      wrapClassName="add-user-modal"
      width="40%"
      :open="open"
      title="新增用户"
      @ok="clickOk"
      @cancel="clickCancel"
    >
      <div class="input-box">
        <div class="item">
          <div class="text">用户昵称</div>
          <a-input class="input" placeholder="请输入"> </a-input>
        </div>
        <div class="item">
          <div class="text">归属部门</div>
          <a-select class="input" placeholder="请选择">
            <a-select-option value="1">测试1</a-select-option>
            <a-select-option value="2">测试2</a-select-option>
          </a-select>
        </div>
        <div class="item">
          <div class="text">手机号码</div>
          <a-input class="input" placeholder="请输入"> </a-input>
        </div>
        <div class="item">
          <div class="text">邮箱</div>
          <a-input class="input" placeholder="请输入"> </a-input>
        </div>
        <div class="item">
          <div class="text">用户名称</div>
          <a-input class="input" placeholder="请输入"> </a-input>
        </div>
        <div class="item">
          <div class="text">用户密码</div>
          <a-input class="input" placeholder="请输入"> </a-input>
        </div>
        <div class="item">
          <div class="text">用户性别</div>
          <a-select class="input" placeholder="请选择">
            <a-select-option value="1">测试1</a-select-option>
            <a-select-option value="2">测试2</a-select-option>
          </a-select>
        </div>
        <div class="item">
          <div class="text">状态</div>
          <a-radio-group class="input" value="1">
            <a-radio value="1">正常</a-radio>
            <a-radio value="2">停用</a-radio>
          </a-radio-group>
        </div>
        <div class="item">
          <div class="text">岗位</div>
          <a-select class="input" placeholder="请选择">
            <a-select-option value="1">测试1</a-select-option>
            <a-select-option value="2">测试2</a-select-option>
          </a-select>
        </div>
        <div class="item">
          <div class="text">角色</div>
          <a-select class="input" placeholder="请选择">
            <a-select-option value="1">测试1</a-select-option>
            <a-select-option value="2">测试2</a-select-option>
          </a-select>
        </div>
        <div class="item remark">
          <div class="text">备注</div>
          <a-textarea class="input" placeholder="请输入"> </a-textarea>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
// 引入组件&方法
import { defineProps, defineEmits, watch, onMounted, ref } from 'vue'
const props = defineProps({
  open: {
    default: false,
  },
})
const emits = defineEmits(['cancel'])
// 自定义数据源
// 生命周期函数
onMounted(() => {})
// 自定义方法
//关闭对话框
const clickCancel = () => {
  emits('cancel')
}
//点击确定
const clickOk = () => {}
</script>
<style lang="less" scoped>
.add-user-modal {
  .input-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .item {
      display: flex;
      align-items: center;
      margin-bottom: (20 / @vh);
      width: 48%;
      .text {
        margin-right: (10 / @vw);
        width: (100 / @vw);
        text-align: right;
      }
      .input {
        flex: 1;
        // width: (300 / @vw);
      }
    }
    .remark {
      align-items: start;
      width: 100%;
    }
  }
}
</style>
